.rc-message-box {
	position: relative;

	width: 100%;
	padding: 24px;

	font-size: var(--message-box-text-size);

	&--embedded {
		padding: 24px 12px 12px;
	}

	&__toolbar-formatting {
		position: absolute;
		left: 0;

		display: flex;

		width: 100%;
		height: 24px;

		justify-content: center;

		&-item {
			display: flex;

			min-width: 16px;
			margin: 0 4px;

			transition: color 0.1s;

			color: var(--message-box-markdown-color);
			align-items: center;
			justify-content: center;

			&:hover,
			&:focus,
			&.active {
				color: var(--message-box-markdown-hover-color);
			}
		}

		&-link {
			color: currentColor;

			font-size: 0.75rem;
		}

		&-icon {
			font-size: 1rem;
			fill: currentColor;
		}
	}

	&__typing {
		position: absolute;
		top: 4px;
		left: 0;

		margin-left: 24px;

		color: var(--message-box-user-typing-color);

		font-size: var(--message-box-user-typing-text-size);

		&-user {
			color: var(--message-box-user-typing-user-color);

			font-weight: bold;
		}

		&::after {
			display: inline-block;
			overflow: hidden;

			width: 0;

			content: "\2026"; /* ascii code for the ellipsis character */
			animation: ellipsis steps(4, end) 1.5s infinite;
			vertical-align: bottom;
		}
	}

	&__container {
		display: flex;

		padding: 0.75rem 0;

		cursor: text;

		transition: background-color 0.3s;

		border-width: var(--message-box-container-border-width);
		border-color: var(--message-box-container-border-color);
		border-radius: var(--message-box-container-border-radius);

		align-items: center;

		&.editing {
			background-color: var(--message-box-editing-color);
		}
	}

	&__textarea {
		overflow-y: auto;

		width: 100%;
		height: 23px;

		min-height: 23px;
		max-height: 155px;
		padding: 0;

		resize: none;

		border: 0;
		background-color: transparent;

		font-family: inherit;
		font-size: var(--message-box-text-size);

		line-height: 21px;

		&::placeholder {
			color: var(--message-box-placeholder-color);
		}
	}

	&__icon {
		display: flex;
		flex: auto 0 0;

		width: 50px;
		height: 21px;

		cursor: pointer;
		align-items: center;
		justify-content: center;

		& .rc-input__icon-svg {
			font-size: 1.4rem;
		}

		& .rc-input__icon-svg--plus {
			transition: transform 0.1s linear;
		}
	}

	&__action-menu {
		position: relative;

		&.active .rc-input__icon-svg--plus {
			transform: rotate(45deg);
		}
	}

	& [data-small] {
		display: none;
	}

	&__audio-message {
		display: flex;

		&-mic {
			display: flex;
		}

		&-done,
		&-cancel,
		&-timer,
		&-loading {
			display: none;
		}

		&-done {
			color: var(--rc-color-success);
		}

		&-cancel {
			color: var(--rc-color-error);
		}

		&-timer {
			margin: 0 -0.25rem;
			align-items: center;
			justify-content: center;

			&-dot,
			&-text {
				margin: 0 0.25rem;
			}

			&-text {
				min-width: 3em;
			}

			&-dot {
				flex: 0 0 auto;

				width: 0.5rem;
				height: 0.5rem;

				border-radius: 50%;
				background-color: red;
			}
		}

		&-loading {
			cursor: pointer;

			animation: spin 1s linear infinite;
		}

		&--recording {
			.rc-message-box__audio-message-mic,
			.rc-message-box__audio-message-loading {
				display: none;
			}

			.rc-message-box__audio-message-done,
			.rc-message-box__audio-message-cancel,
			.rc-message-box__audio-message-timer {
				display: flex;
			}
		}

		&--loading {
			.rc-message-box__audio-message-mic,
			.rc-message-box__audio-message-done,
			.rc-message-box__audio-message-cancel,
			.rc-message-box__audio-message-timer {
				display: none;
			}

			.rc-message-box__audio-message-loading {
				display: flex;
			}
		}

		&--busy {
			.rc-message-box__audio-message-mic {
				cursor: not-allowed;

				opacity: 0.5;
			}
		}
	}

	&__join {
		display: flex;

		margin: 0 -0.25rem;
		align-items: center;
		flex-wrap: nowrap;
	}

	&__join-code {
		flex: 0 0 10rem;

		margin: 0 0.25rem;
	}

	&__join-button {
		flex: 0;

		margin: -1rem 0.15rem;
	}

	&__take-it-button {
		margin: 0 0.5rem;
	}

	&__cannot-send {
		display: flex;
		justify-content: space-between;
	}
}

@media (width <= 500px) {
	.rc-message-box {
		margin-top: 1rem;
		padding: 0;

		&__typing {
			top: -1rem;

			margin-left: 1rem;
		}

		&__toolbar-formatting {
			display: none;
		}

		&__container {
			display: flex;

			padding: var(--default-small-padding);
			padding-bottom: calc(var(--default-small-padding) - 8px);

			border-width: 0;
			border-top-width: 1px;
			flex-wrap: wrap;
		}

		& [data-desktop] {
			display: none;
		}

		& [data-small] {
			display: flex;
		}

		&__textarea {
			flex: 1 0 100%;

			margin-bottom: 10px;
			order: 1;
		}

		&__action {
			margin: 5px 10px;

			font-size: 20px;
		}

		& [disabled] {
			opacity: 0.4;
		}

		& .emoji-picker-icon {
			width: initial;
			padding-right: 10px;
			order: 2;
		}

		&__action-label {
			display: flex;
			flex-direction: row;
			flex: 1 1 auto;

			font-size: 20px;
			order: 3;
		}

		&__audio-message {
			order: 4;
		}

		&__send {
			flex: 0;

			font-size: 20px;
			order: 5;
		}
	}
}

.rc-popover--message-box {
	& .rc-popover__divider {
		display: none;
	}

	& .rc-popover__title {
		text-transform: none;

		color: var(--message-box-popover-title-text-color);

		font-size: var(--message-box-popover-title-text-size);

		&:not(:first-child) {
			margin-top: var(--popover-column-padding);
		}
	}
}

.rtl .rc-message-box__typing {
	right: 0;

	margin-right: 24px;
}
